<template>
  <div id="myeditor">
    <!-- 富文本编辑器的渲染容器，需与js中初始化时的选择器匹配 -->
  </div>
</template>

<script setup>
import { onMounted, defineEmits, defineProps } from "vue";
import E from "wangeditor"; // 引入 wangEditor 富文本编辑器库

// 定义子组件触发的事件，用于向父组件传递内容变化
const emit = defineEmits(["event"]); 

// 定义组件接收的props：父组件传入的初始内容
const props = defineProps({
  content: {
    type: String, // 内容类型为字符串
    default: "" // 默认值为空字符串
  }
});

onMounted(() => {
  // 初始化编辑器实例，绑定到id为myeditor的DOM元素
  const editor = new E("#myeditor");
  
  // 调用create方法渲染编辑器
  editor.create();

  // 如果存在父组件传递的content，设置编辑器初始HTML内容
  props.content && editor.txt.html(props.content);

  // 监听编辑器内容变化，当内容改变时触发回调
  editor.config.onchange = function(newHtml) {
    // 子组件通过event事件向父组件传递最新的HTML内容
    emit("event", newHtml);
  };
});
</script>